<script>
const data = {
  name: '吕布'
};

// 我想修改 name，可以下面写法
// 但是！
// 我想每次修改数据的时候，去打印个东西（或者我想修改 DOM），做不到（没有契机）！
// data.name = '典韦'

// 参数 1：对象
// 参数 2：属性
// 参数 3：配置对象
// 意思：给 data 对象，定义了一个 name 属性，设置 name 属性的时候会自动调用 set 方法

const copyData = { ...data }

Object.defineProperty(data, 'name', {
  // 只要获取 data.name 属性就会自动触发 get 函数
  get() {
    console.log('获取了 name')
    // ...
    return copyData.name
  },
  // 只要修改 data.name 属性就会自动触发 set 函数
  // 参数：新值
  set(newValue) {
    console.log('设置了 name')
    // 契机
    // 修改视图...
    // console.log(newValue)
    copyData.name = newValue
  }
})

data.name = '典韦'
console.log(data.name)
// console.log(data)
</script>
